<%--
  Created by IntelliJ IDEA.
  User: Edward_yang
  Date: 2017/12/11 0011
  Time: 15:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>标签管理</title>
    <script type="text/javascript">
        function formatterImg(value){
            if(value!=null){
                return '<img height="25px" src="'+value+'" alt="" />';
            }else{
                return '';
            }

        }
    </script>
</head>
<body>
<div class="easyui-layout" fit="true" >
    <!--west分类列表start-->
    <div data-options="region:'west',split:true,border:false" title="分类列表" style="width:35%;">
        <table id="classify_datagrid" class="easyui-treegrid"
               data-options="
		   		url:'${path }/category/treeGrid.do',
		   		fit:true,
		   		idField:'id',
		   		treeField:'name',
		   		parentField : 'parentId',
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#classify_tools',
		   		pagination:true,
		   		singleSelect:true,
		   		onClickRow:function(node){
		   			getLabels(node.id);

        }">
            <thead>
            <th data-options="field:'id'">ID</th>
            <th data-options="field:'name',width:100">分类名称</th>
            <th data-options="field:'logo',width:200,formatter:formatterImg">分类logo</th>
            <th data-options="field:'status',width:100,formatter:function(value){
                if(value) return '是';return '否';}">是否启用</th>
            <th data-options="field:'ord',width:100">分类排序</th>
            </thead>
        </table>
        <div id="classify_tools">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick=" $('#classify_datagrid').treegrid('reload') ">刷新</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-tip'" onclick="initializeLabel()">初始化标签数据</a>
        </div>
    </div>
    <!--end-->
<script>
    //联动处理classifyID处理Label
    function getLabels(classifyID) {
         //获取上一级选中行ID 查询判断
            $("#smm_label").attr("rowsDateID",classifyID);
            $("#sos_label").attr("rowsDateID",classifyID);

            $("#label_datagrid").datagrid('clearSelections');
            $("#label_detail_datagrid").datagrid('clearSelections');
            var queryParams = {};
            queryParams.one_category_id = classifyID;
           /* if(val.length > 0){
                queryParams.keyWord = val;
            }*/
            var options = $("#label_datagrid").datagrid('getPager').data("pagination").options;
            options.pageNumber = 1;
            //重新加载
            $("#label_datagrid").datagrid('options').url = "${path}/label/list.do";
            $("#label_datagrid").datagrid('options').queryParams = queryParams;
            $("#label_datagrid").datagrid('reload');
    }
    //前台初始化标签数据
    function initializeLabel() {
        $.messager.confirm("系统提示","点击确认后会初始化前台标签数据!",function(yes){
            if(yes){
                $.ajax({
                    url:"${path}/label/initializeLabel.do",
                    type:"post",
                    dataType:"json",
                    success:function(data){
                        if(data.success){
                            $.messager.show({
                                title:"系统提示",
                                msg:"操作成功!",
                                timeout:600,
                                style:"left:30%;top:10%",
                                showType:"fade"
                            });
                        }else{
                            $.messager.alert("系统提示", data.msg,"error");
                        }
                    },
                    error:function(){
                        $.messager.progress("close");
                        $.messager.alert("系统提示", "服务器连接失败!","error");
                    }
                });
            }
        });
    }
</script>
    <!--center标签列表start-->
    <div data-options="region:'center',split:true,border:false" title="标签列表" style="width:35%;">
        <table id="label_datagrid" class="easyui-datagrid"
               data-options="
		   		url:'${path}/label/list.do',
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#label_tools',
		   		pagination:true,
		   		singleSelect:true,
		   		onClickRow:function(index, row){
		   			getLabelDetails(row.code);
		   		}">
            <thead>
            <th data-options="field:'id'">ID</th>
            <th data-options="field:'name',width:160">标签名称</th>
            <th data-options="field:'code',width:100">标签编号</th>
            <th data-options="field:'type',width:100,formatter:function(value){
             if(value==0){
             return '商家标签';
             }else if(value==1){
             return '产品标签';
             }else{
                return '其它';
             }
                 }">标签分类</th>
            <th data-options="field:'logo',width:100,formatter:formatterImg">标签logo</th>
            <th data-options="field:'ord',width:100">标签排序</th>
            </thead>
        </table>
       <div id="label_tools">

            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="$('#label_datagrid').datagrid('reload')">刷新</a>

            <shiro:hasPermission name="/label/add.do">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="openEditLabelBox('add')">添加</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/label/edit.do">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="openEditLabelBox('update')">修改</a>
            </shiro:hasPermission>
            <shiro:hasPermission name="/label/delete.do">
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteLabel()" >删除</a>
            </shiro:hasPermission>

            <label>关键词:</label>
            <input id="sos_label" rowsDateID="-1" class="easyui-searchbox" data-options="prompt:'请输入标签名称/编号',menu:'#smm_label',searcher:dolabelSearch"  value=""  style="width:220px;"/>
        </div>
       <div id="smm_label" data-options="onClick:labelMenuHandler" rowsDateID="-1">
            <div data-options="name:'0'">商家标签</div>
            <div data-options="name:'1'">产品标签</div>
        </div>
        <!--添加标签弹窗-->
        <style type="text/css">

            .grid{font:12px arial,helvetica,sans-serif;border:0px solid #8DB2E3}
            .grid td{font:100% arial,helvetica,sans-serif;height:40px;padding:5px}
            .grid{width:100%;border-collapse:collapse}
            .grid td{border:1px solid #e0e0e0;padding-left:5px}
        </style>
        <div class="easyui-dialog" id="edit_label_dialog" title="添加标签" data-options="closed:true,modal:true,width:500,height:450">
            <form id="edit_label_form" method="post">
                <table class="grid" align="center" style="margin-top: 20px">
                    <input type="hidden" name="id" id="edit-id-input" />
                    <tr style="border: 10px">
                        <td><lable for="name">标签名称:</lable></td>
                        <td>
                            <input class="easyui-validatebox" name="name" data-options="required:true" style="width:200px;"/>
                        </td>
                        <td> 图片预览:</td>
                    </tr>
                    <tr >
                        <td><lable for="code">标签编号:</lable></td>
                        <td>
                            <input class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  name="code" data-options="required:true" style="width:200px;"/>
                        </td>
                        <td rowspan="2"><img height="60px" src="" id="tpyl"/></td>
                    </tr>
                    <tr >
                        <td><lable for="ord">标签排序:</lable></td>
                        <td>
                            <input class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" name="ord" data-options="required:true" style="width:200px;"/>
                        </td>
                    </tr>
                    <tr >
                        <td> <div id="upload_ue"></div>
                            标签logo</td>
                        <td><input class="easyui-validatebox" readonly="readonly" value="" type="text" id="logo"    name="logo" style="width:200px;"/></td>
                       <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImage();">上传图片</a></td>
                        <script type="text/javascript">
                            var _editor;
                            $(function() {
                                //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                                _editor = UE.getEditor('upload_ue',{
                                    serverUrl:"${path}/file/upload.do?compress=1"
                                });

                                _editor.ready(function () {
                                    //设置编辑器不可用
                                    // _editor.setDisabled();
                                    //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                                    _editor.hide();
                                    //侦听图片上传
                                    _editor.addListener('beforeInsertImage', function (t, arg) {
                                        //有多少张图片arg.length就是多大
                                        $("#logo").val(arg[0].src);
                                        $("#tpyl").attr("src",arg[0].src);
                                    });
                                });
                            });
                            //弹出图片上传的对话框
                            function upImage() {
                                var myImage = _editor.getDialog("insertimage");
                                myImage.open();
                            }
                        </script>
                    </tr>

                    <tr>
                        <td><lable for="type">标签类型:</lable></td>
                        <td><select id="label_type_id" class="easyui-combobox" data-options="panelHeight:'auto',required:true,editable:false" name="type" style="width:205px;" />
                            <option value="0">商家标签</option>
                            <option value="1">产品标签</option>
                            </select>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><lable for="type">分类类型:</lable></td>
                        <td>
                            <select id="classify_id" class="easyui-combobox" data-options="panelHeight:'auto',required:true" name="categoryId" style="width:205px;" />
                            </select>
                        </td>
                        <td></td>
                    </tr>

                </table>
                <div style="margin-top: 40px;text-align: center">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="editLabel()">保存</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="$('#edit_label_dialog').dialog('close')">取消</a>
                </div>
            </form>
        </div>
    </div>
    <!--end-->

<script>
    var flag="add";
    //选择标签类型
    function labelMenuHandler(item){
        var classifyID=$("#smm_label").attr("rowsDateID")
        dolabelSearch('',item.name,classifyID);
    }

    //查询标签
    function dolabelSearch(val,name,classifyID){
        var queryParams = {};
            classifyID =$("#sos_label").attr("rowsDateID");
        queryParams.type = name;
        if(classifyID!=-1){
            queryParams.one_category_id = classifyID;
        }
        if(val.length > 0){
            queryParams.keyWord = val;
        }
        var options = $("#label_datagrid").datagrid('getPager').data("pagination").options;
        options.pageNumber = 1;
        //重新加载
        $("#label_datagrid").datagrid('options').url = "${path}/label/list.do";
        $("#label_datagrid").datagrid('options').queryParams = queryParams;
        $("#label_datagrid").datagrid('reload');
    }

    //打开编辑弹框
    function openEditLabelBox(str){

        $("#edit_label_form").form("clear");
        $('#classify_id').combotree({
            url : '${path }/category/allTree.do',
            parentField : 'pid',
            lines : true,
            panelHeight : 'auto',
            value : '${category.parentId}'
        });

        if(str == "update"){
            flag=str;
            var select = $("#label_datagrid").datagrid("getSelected");
            if(select == null){
                $.messager.alert("提示","请选择一个标签","info");
                return;
            }
            $("#edit_label_dialog").dialog({title: "修改标签"});
            $("#edit_label_form").form("load",select);
            $("#tpyl").attr("src",select.logo);
        }else{
            flag=str;

        }
        $("#edit_label_dialog").dialog("open");
    }
    /***保存和修改标签**/
    function editLabel() {
        $.messager.progress();
        var url = "";
        var str = "";
        if(flag == 'add'){
            url = "${path}/label/add.do";
            str = "添加";
        }else if(flag == 'update'){
            url = "${path}/label/edit.do";
            str = "修改";
        }
        $("#edit_label_form").form("submit",{
            url:url,
            onSubmit:function(){
                var valid = $(this).form("validate");
                if (!valid) {
                    $.messager.progress("close");
                }
                return valid;
            },
            success:function(data){
                data=$.parseJSON(data);
                $.messager.progress("close");
                if(data.success){
                    $("#edit_label_dialog").dialog("close");
                    $.messager.show({
                        title:"系统提示",msg:str +"成功!",
                        timeout:600,style:"left:30%;top:10%",
                        showType:"fade"
                    });
                    $("#label_datagrid").datagrid("reload");
                }else{
                    $.messager.alert("系统提示", data.msg,"error");
                }
            }
        });
    }
    //删除判断
    function deleteLabel() {
        var select = $("#label_datagrid").datagrid("getSelected");
        if(select == null){
            $.messager.alert("系统提示","请选择一个标签","info");
            return;
        }
        $.messager.confirm("确认","确定要删除该标签吗?\n确定删除将连同配置信息一同删除",function(yes){
            if(yes){
                commonDelete("${path}/label/delete.do",select.id,"label_datagrid")
            }
        });
    }
    //删除公共调用方法
    function commonDelete(url,id,datagrid){
        $.messager.progress();
        $.ajax({
            url:url,
            type:"post",
            data:{id : id},
            dataType:"json",
            success:function(data){
                $.messager.progress("close");
                if(data.success){
                    $.messager.show({
                        title:"系统提示",
                        msg:"删除成功!",
                        timeout:600,
                        style:"left:30%;top:10%",
                        showType:"fade"
                    });
                    $("#"+datagrid).datagrid("reload");
                    $("#"+datagrid).datagrid('clearSelections');
                }else{
                    $.messager.alert("系统提示", data.msg,"error");
                }
            },
            error:function(){
                $.messager.progress("close");
                $.messager.alert("系统提示", "服务器连接失败!","error");
            }
        });
    }


    //联动处理LabelCode控制
    function getLabelDetails(labelCode) {
        $("#label_detail_datagrid").datagrid('clearSelections');
        var queryParams = {};
        queryParams.sellerProductLabelCode = labelCode;
        var options = $("#label_detail_datagrid").datagrid('getPager').data("pagination").options;
        options.pageNumber = 1;
        //重新加载
        $("#label_detail_datagrid").datagrid('options').url = "${path}/label/detail/list.do";
        $("#label_detail_datagrid").datagrid('options').queryParams = queryParams;
        $("#label_detail_datagrid").datagrid('reload');
    }
</script>
    <!--east标签明细列表start-->
    <div data-options="region:'east',split:true,border:false" title="标签明细列表" style="width:30%;">
        <table id="label_detail_datagrid" class="easyui-datagrid"
               data-options="
			    url:'${path}/label/detail/list.do',
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#label_detail_tools',
		   		pagination:true,
		   		singleSelect:true">
            <thead>
            <th data-options="field:'id'">ID</th>
            <th data-options="field:'name',width:160">标签明细名称</th>
            <th data-options="field:'code',width:100">标签明细编号</th>
            <th data-options="field:'logo',width:100,formatter:formatterImg">标签明细logo</th>
            <th data-options="field:'ord',width:100">标签明细排序</th>
            </thead>
        </table>
    </div>
    <div id="label_detail_tools">

        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="$('#label_detail_datagrid').datagrid('reload')">刷新</a>

        <shiro:hasPermission name="/label/detail/add.do">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="openEditlabelDetailBox('add')">添加</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="/label/detail/edit.do">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="openEditlabelDetailBox('update')">修改</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="/label/detail/delete.do">
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'"  onclick="deleteLabelDetail()" >删除</a>
        </shiro:hasPermission>

    <label>关键词:</label>
        <input class="easyui-searchbox" data-options="prompt:'请输入标签明细名称/编号',searcher:dolabelDetailSearch"/>
        <!--弹框-->
        <style type="text/css">
            .grid1{font:12px arial,helvetica,sans-serif;border:0px solid #8DB2E3}
            .grid1 td{font:100% arial,helvetica,sans-serif;height:40px;padding:5px}
            .grid1{width:100%;border-collapse:collapse}
            .grid1 td{border:1px solid #e0e0e0;padding-left:5px}
        </style>
        <div class="easyui-dialog" id="edit_label_detail_dialog" title="添加标签明细" data-options="closed:true,modal:true,width:500,height:450">
            <form id="edit_label_detail_form" method="post">
                <table class="grid1" align="center" style="margin-top: 20px">
                    <input type="hidden" name="id" id="edit-id-detail-input" />
                    <tr style="border: 10px">
                        <td><lable for="name">标签明细名称:</lable></td>
                        <td>
                            <input class="easyui-validatebox" name="name" data-options="required:true" style="width:200px;"/>
                        </td>
                        <td> 图片预览:</td>
                    </tr>
                    <tr >
                        <td><lable for="code">标签明细编号:</lable></td>
                        <td>
                            <input class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  name="code" data-options="required:true" style="width:200px;"/>
                        </td>
                        <td rowspan="2"><img height="60px" src="" id="tpyl1"/></td>
                    </tr>
                    <tr >
                        <td><lable for="ord">标签明细排序:</lable></td>
                        <td>
                            <input class="easyui-validatebox" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"  name="ord" data-options="required:true" style="width:200px;"/>
                        </td>
                    </tr>
                    <tr >
                        <td> <div id="upload_ue_detail"></div>
                            标签logo</td>
                        <td><input class="easyui-validatebox" readonly="readonly" type="text" id="logo_detail"      name="logo" style="width:200px;"/></td>
                        <td><a href="javascript:void(0);"  class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="upImage1();">上传图片</a></td>
                        <script type="text/javascript">

                            var _editor1;
                            $(function() {
                                //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
                                _editor1 = UE.getEditor('upload_ue_detail',{
                                    serverUrl:"${path}/file/upload.do?compress=1"
                                });

                                _editor1.ready(function () {
                                    //设置编辑器不可用
                                    // _editor.setDisabled();
                                    //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
                                    _editor1.hide();
                                    //侦听图片上传
                                    _editor1.addListener('beforeInsertImage', function (t, arg) {
                                        //有多少张图片arg.length就是多大
                                        $("#logo_detail").val(arg[0].src);
                                        $("#tpyl1").attr("src",arg[0].src);
                                    });
                                });
                            });
                            //弹出图片上传的对话框
                            function upImage1() {
                                var myImage = _editor1.getDialog("insertimage");
                                myImage.open();
                            }
                        </script>
                    </tr>

                    <tr>
                        <td><lable for="type">标签类型:</lable></td>
                        <td><select id="label_id" class="easyui-combobox" data-options="panelHeight:'auto',required:true" name="sellerProductLabelCode" style="width:205px;" />
                            </select>
                        </td>
                        <td></td>
                    </tr>

                </table>
                <div style="margin-top: 40px;text-align: center">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'" onclick="editLabelDetail()">保存</a>
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" onclick="$('#edit_label_detail_dialog').dialog('close')">取消</a>
                </div>
            </form>
        </div>
    </div>
    <!--end-->
    <script>
        //保存
        function editLabelDetail() {
            $.messager.progress();
            var url = "";
            var str = "";
            if(flag == 'add'){
                url = "${path}/label/detail/add.do";
                str = "添加";
            }else if(flag == 'update'){
                url = "${path}/label/detail/edit.do";
                str = "修改";
            }
            $("#edit_label_detail_form").form("submit",{
                url:url,
                onSubmit:function(){
                    var valid = $(this).form("validate");
                    if (!valid) {
                        $.messager.progress("close");
                    }
                    return valid;
                },
                success:function(data){
                    data=$.parseJSON(data);
                    $.messager.progress("close");
                    if(data.success){
                        $("#edit_label_detail_dialog").dialog("close");
                        $.messager.show({
                            title:str +"成功",msg:str +"成功!",
                            timeout:600,style:"left:30%;top:10%",
                            showType:"fade"
                        });
                        $("#label_detail_datagrid").datagrid("reload");
                    }else{
                        $.messager.alert(str +"失败", data.msg,"error");
                    }
                }
            });
        }

        //打开标签明细编辑弹框
        function openEditlabelDetailBox(str){
            $("#edit_label_detail_form").form("clear");
            if(str == "update"){
                flag=str;
                var select = $("#label_detail_datagrid").datagrid("getSelected");
                if(select == null){
                    $.messager.alert("提示","请选择一个标签明细","info");
                    return;
                }
                loadLabelCombobox(select.sellerProductLabelCode);
                $("#edit_label_detail_dialog").dialog({title: "修改标签"});
                $("#edit_label_detail_form").form("load",select);
                $("#tpyl1").attr("src",select.logo);
            }else{
                var selectLabel = $("#label_datagrid").datagrid("getSelected");
                if(selectLabel == null){
                    $.messager.alert("提示","请选择一个标签","info");
                    return;
                }
                loadLabelCombobox(selectLabel.code);
                flag=str;
            }
            $("#edit_label_detail_dialog").dialog("open");
        }
        function loadLabelCombobox(labelCatCode){
            $("#label_id").combobox({
                url : "${path}/label/labelComboboxList.do?labelCatCode=" + labelCatCode,
                valueField:'code',
                textField:'name',
                editable:false
            });
        }

        //查询标签
        function dolabelDetailSearch(val){
            var queryParams = {};
            if(val.length > 0){
                queryParams.keyWord = val;
            }
            var options = $("#label_detail_datagrid").datagrid('getPager').data("pagination").options;
            options.pageNumber = 1;
            //重新加载
            $("#label_detail_datagrid").datagrid('options').url = "${path}/label/detail/list.do";
            $("#label_detail_datagrid").datagrid('options').queryParams = queryParams;
            $("#label_detail_datagrid").datagrid('reload');
        }
//删除明细标签
        function deleteLabelDetail() {
            var select = $("#label_detail_datagrid").datagrid("getSelected");
            if(select == null){
                $.messager.alert("提示","请选择一个标签","info");
                return;
            }
            $.messager.confirm("确认","确定要删除该标签吗?\n确定删除将连同配置信息一同删除",function(yes){
                if(yes){
                    commonDelete("${path}/label/detail/delete.do",select.id,"label_detail_datagrid")
                }
            });
        }
    </script>
</div>
</body>
</html>
